<template>
    <div>
        <div class="van-uploader">
            <div class="cell head">
                <div>头像</div>
                <img :src="userInfo.avatar" class="pic" />
            </div>
            <input type="file" class="file" @change="changeAvatar" />
        </div>
        <div class="line"></div>
        <div class="cell">
            <div>昵称</div>
            <div class="name">
                <input v-model="userInfo.nickname" type="text" />
                <svg aria-hidden="true" class="right">
                    <use xlink:href="#icon-chevronright" />
                </svg>
            </div>
        </div>
        <div class="line"></div>
        <div class="cell">
            <div>手机号</div>
            <div class="name" @click.stop="toChangePhone">
                <input v-model="userInfo.phone" />
                <svg aria-hidden="true" class="right">
                    <use xlink:href="#icon-chevronright" />
                </svg>
            </div>
        </div>

        <!--        <div class="note">-->
        <!--            卡包内各系统为互相绑定关系，新的被推荐人进入卡包的一个系统再跳转进入其他品牌系统默认绑定到卡包内对应品牌账号下（扫码绑定除外，原有关系不变），同一品牌下有多账号在卡包内，以置顶系统为主系统。-->
        <!--        </div>-->

        <div class="btn-db">
            <button-normal
                widthPro="200"
                heightPro="35"
                textBtn="完成"
                color="#fff"
                size="14"
                @click.native="uploadUserInfo"
            ></button-normal>
        </div>
    </div>
</template>

<script>
    import API from "../../request/api";
    import buttonNormal from "../../components/common/buttonNormal";
    import { commonMixin } from "@/common/mixin";
    import { mapMutations } from "vuex";
    import regular from "@/common/regular";

    export default {
        name: "poly-personal",
        mixins: [commonMixin],
        components: { buttonNormal },
        data() {
            return {
                aid: ""
            };
        },
        computed: {},
        watch: {},
        created() {
            this.aid = this.$route.query.aid;
            this._getPolyInfo()
        },
        methods: {
            //聚合帐号info
            _getPolyInfo() {
                return this.request
                    .get(API.polyInfo, { aid: this.aid })
                    .then(res => {
                        // this.polyAccount = res;
                        this.setUserInfo(res);
                    })
                    .catch(err => {
                        console.log(err);
                        // this.$toast.fail(err);
                    });
            },
            changeAvatar(e) {
                let file = e.target.files[0];
                const type = ["image/jpeg", "image/jpg", "image/png"];
                if (type.includes(file.type)) {
                    this.showGlobaLoading();
                    // todo 头像选择
                    this.request.upPic({ type: 1, file: file }).then(
                        res => {
                            this.userInfo.avatar = res;
                            this.hideGlobaLoading();
                        },
                        res => {}
                    );
                } else {
                    this.$toast("请上传正确格式的图片(jpg/png)");
                }
            },
            async uploadUserInfo() {
                let regue = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
                if (!regular.REGEX_CHINA_MOBILE.test(this.userInfo.phone)) {
                    this.$toast("请填写正确的手机号");
                    return false;
                } else if (this.userInfo.nickname.length > 6) {
                    this.$toast("昵称长度超过六个字符");
                } else if (!regue.test(this.userInfo.nickname)) {
                    this.$toast("请勿使用特殊字符");
                } else {
                    await this.request
                        .post(API.setPolyInfo, this.userInfo)
                        .then(res => {
                            if (res) {
                                this.$toast("保存成功");
                            }
                        });
                    await this.request.get(API.polyInfo).then(res => {
                        if (res) {
                            this.setUserInfo(res);
                            this.$router.back();
                        }
                    });
                }
            },
            toChangePhone() {
                this.$router.push({
                    name: "poly-phone",
                    query: {
                        type: 10
                    }
                });
            },
            ...mapMutations(["setUserInfo"])
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl';

    .van-uploader {
        width: 100vw;
        position: relative;

        .file {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
    }

    .per-p {
        width: 100vw;
    }

    .cell {
        cell();

        .pic {
            width: vw(45);
            height: vw(45);
            border-radius: vw(25);
        }

        .name {
            flex-x();

            input {
                text-align: right;
                margin-right: vw(10);
            }
        }

        .right {
            arrow();
        }
    }

    .head {
        height: vw(60);
        line-height: vw(60);
    }

    .btn-db {
        position: absolute;
        width: 100vw;
        bottom: 0;
    }

    .sure {
        btn-center();
    }

    .note {
        margin: middleMargin cellPadding;
        word-vw(word12, gray9);
        line-height: vw(16);
    }
</style>
